<!--
 * @Author: your name
 * @Date: 2022-01-11 23:01:08
 * @LastEditTime: 2022-01-12 04:27:08
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \campus-market-frontend-master\src\pages\demand\new.vue
-->
<route lang="yaml">
meta:
  requiresAuth: true
</route>

<template>
  <el-container>
    <el-header><Header></Header></el-header>
    <el-main class="el-main">
      <el-card class="el-card">
        <div class="imgUpload">
          <input id="imgInput" type="file" @change="getImg" multiple/>
        </div>
        <el-form label-width="100px" size="mini" class="publishItemForm">
          <el-form-item label="需求商品">
            <el-input v-model.lazy="form.name"></el-input>
          </el-form-item>
          <el-form-item label="需求描述" class="description">
            <el-input
              v-model.lazy="form.description"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item label="期望价格">
            <el-input v-model.number.lazy="form.price" type="number"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="handleSubmit">发布</el-button>
      </el-card>
    </el-main>
    <el-footer><Footer></Footer></el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useErrors } from '../../composable/useErrors'
import {
  NewItemForm,
  postItems,
  ItemStatus,
  postPhotoById,
  patchItemById
} from '../../services/items'

import Header from '../../components/header.vue'
import Footer from '../../components/footer.vue'

const itemData = ref()
const imgData = ref()
const { errorHandler } = useErrors()
const router = useRouter()
const formdata = new FormData()

// 保存发布新商品需要的数据
const form = reactive<NewItemForm>({
  name: '',
  description: '',
  price: 0,
  status: ItemStatus.DRAFT
})

function getImg(e: Event) {
  const target = e.target as HTMLInputElement
  const list = target.files as FileList
  for (const i of Object.keys(list)) {
    formdata.append('files', list[i as unknown as number])
  }
}

// 提交创建新商品
async function handleSubmit() {
  try {
    // 检查用户输入
    if (form.name === '' || form.price === 0) {
      throw new Error('商品名称与价格不能为空')
    }
    // 新建未发布商品，API 返回创建的求购的详细数据
    itemData.value = (await postItems(form)).data

    imgData.value = (await postPhotoById(itemData.value.id, formdata)).data

    form.status = ItemStatus.REQUEST
    itemData.value = (await patchItemById(itemData.value.id, form)).data

    // 使用返回的 ID 跳转到求购页面
    await router.push(`/demand`)
  } catch (err) {
    errorHandler(err)
  }
}
</script>

<style lang="less" scoped>
.el-container {
  height: 700px;
  .el-header,
  .el-main,
  .el-footer {
    padding: 0;
  }
}
.el-main {
  overflow: inherit;
  .el-card {
    margin: 30px auto;
    width: 800px;
    height: auto;
    box-shadow: 0px -5px 10px #b8b4b4;
    text-align: center;
    .imgUpload {
      margin: 20px 0;
    }
  }
}
</style>
